<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>1、2、3，发射！</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        html {
            box-sizing: border-box;
            font-size: 62.5%;
            overflow: hidden;
        }

        * {
            padding: 0;
            margin: 0;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            box-sizing: inherit;
        }

        *::after,
        *::before {
            box-sizing: inherit;
        }

        body .send-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        @keyframes icon-animation {
            0% {
                transform: rotate(0deg) scale(1);
            }

            33% {
                transform: rotate(-120deg) scale(4);
            }

            66% {
                transform: rotate(-240deg) scale(4);
            }

            100% {
                transform: rotate(-360deg) scale(1);
            }
        }

        @keyframes input-shadow {
            0% {
                box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
            }

            40% {
                box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
            }

            50% {
                box-shadow: none;
            }

            70% {
                box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
            }

            100% {
                box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
            }
        }

        .icon-wrapper-animation {
            animation: icon-animation 1.5s linear;
            transition: color 0.6s ease;
            color: #66bb6a;
        }

        .clicked {
            transform: translate(-50%, calc(-50% + 1px)) !important;
            transition: transform 0.15s ease;
            animation: input-shadow 0.15s ease;
            box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
        }

        .clicked>.text {
            transform: translateY(1px);
            transition: transform 0.15s ease-out;
        }


        body .send-button {
            width: 250px;
            height: 45px;
            border-radius: 2px;
            box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
            cursor: pointer;
            user-select: none;
            transition: transform 0.15s;

        }

        body .send-button .text {
            position: absolute;
            left: 10px;
            font-size: 22px;
            font-size: 2.2rem;
            letter-spacing: 1px;
            line-height: 45px;

            text-transform: uppercase;
        }

        body .send-button .icon-wrapper {
            position: absolute;
            right: -65px;
            bottom: -10px;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            line-height: 45px;
            color: #676767;
        }

        body .send-button .icon-wrapper [class*="icon-"] {
            position: absolute;
            left: 100px;
            bottom: 10px;
            transition: color 0.6s ease;
        }

        body .send-button .icon-wrapper .icon-fly {
            transform: rotate(15deg);
            font-size: 23px;
            font-size: 2.3rem;
            opacity: 1;
        }

        body .send-button .icon-wrapper .icon-yes {
            opacity: 0;
            font-size: 25px;
            font-size: 2.5rem;
        }
    </style>

</head>

<body>

    <button type="submit" class="submit">
        <div class="send-button">
            <span class="text">啊！发射！</span>
            <span class="icon-wrapper">
                <span class="icon-fly"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                        fill="currentColor" class="bi bi-send" viewBox="0 0 16 16">
                        <path
                            d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z" />
                    </svg></span>
                <span class="icon-yes"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16" style="margin-bottom:-2px">
                        <path
                            d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z" />
                    </svg></span>
            </span>
        </div>
    </button>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var sendBtn = document.querySelector('.send-button');
            var iWrapper = document.querySelector('.icon-wrapper');
            var i1 = document.querySelector('.icon-fly');
            var i2 = document.querySelector('.icon-yes');
            function getAnimationEventName() {
                var animations = {
                    'animation': 'animationend',
                    'OAnimation': 'oAnimationEnd',
                    'MozAnimation': 'animationend',
                    'WebkitAnimation': 'webkitAnimationEnd'
                };
                for (var t in animations) {
                    if (iWrapper.style[t] !== undefined) {
                        return animations[t];
                    }
                }
                return null;
            }
            var animationEventName = getAnimationEventName();
            sendBtn.addEventListener('click', function () {
                iWrapper.style.color = '#66bb6a';
                iWrapper.classList.add('icon-wrapper-animation');
                sendBtn.classList.add('clicked');
                setTimeout(function () {
                    i1.style.opacity = 0;
                    i1.style.transition = 'opacity 300ms';
                }, 900);
                setTimeout(function () {
                    i2.style.opacity = 1;
                    i2.style.transition = 'opacity 300ms';
                }, 900);
            });
            iWrapper.addEventListener(animationEventName, function (e) {
                if (e.animationName === 'icon-animation') {
                    iWrapper.classList.remove('icon-wrapper-animation');
                    setTimeout(reset, 1200);
                }
            });
            sendBtn.addEventListener(animationEventName, function (e) {
                if (e.animationName === 'input-shadow') {
                    sendBtn.classList.remove('clicked');
                }
            });
            function reset() {
                i1.style.opacity = 1;
                i2.style.opacity = 0;
                i1.style.transition = '';
                i2.style.transition = '';
                iWrapper.style.color = '#676767';
            }
        });
    </script>

</body>

</html>